<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="./style.css" />
  </head>
  <body>
    <div id="list1" class="list">
      <div>
        Item 1.1
        <div class="list n1">
          <div>Item 2.1</div>
          <div>
            Item 2.2
            <div class="list n2">
              <div>Item 3.1</div>
              <div>Item 3.2</div>
              <div>Item 3.3</div>
              <div>Item 3.4</div>
            </div>
          </div>
          <div>Item 2.3</div>
          <div>Item 2.4</div>
        </div>
      </div>
      <div>Item 1.2</div>
      <div>Item 1.3</div>
      <div>
        Item 1.4
        <div class="list n1">
          <div>Item 2.1</div>
          <div>Item 2.2</div>
          <div>Item 2.3</div>
          <div>Item 2.4</div>
        </div>
      </div>
      <div>Item 1.5</div>
    </div>

    <style>
      .n1 > div {
        background-color: lightblue;
      }

      .n2 > div {
        background-color: lightgreen;
      }

      .list {
        padding: 50px;
      }
    </style>

    <script src="../../packages/sortablejs/dist/sortable.umd.js"></script>

    <script type="text/javascript">
      var elements = document.getElementsByClassName("list");

      for (var i = 0; i < elements.length; i++) {
        new Sortable(elements[i], {
          group: "shared",
          invertSwap: true,
        });
      }
    </script>
  </body>
</html>
